HTML

2024-01-09 19:10| 来源: 网络整理| 查看: 265

js中的计时器 1、setTimeout计时器

setTimeout(要执行的方法，时间单位（毫秒）)

这里的执行方法通常是匿名函数（函数=方法）

setTimeout(function () { console.log('我是setTimeout计时器') }, 2000)

setTimeout()意思：多少秒后执行函数，这里的意思就是：2秒后将在控制台打印“我是setTimeout计时器”

2、setInterval计时器

setInterval(要执行的方法，时间单位（毫秒）)

这里的执行方法通常是箭头函数

setInterval(() => { console.log('我是setInterval计时器') }, 2000);

setInterval()意思：每隔多少秒执行函数，这里的意思就是：每隔2秒，将在控制台打印“我是setInterval计时器”

两者区别：setTimeout里的函数只会被执行一次，而setInterval里的函数会每隔多少秒执行一次。需要注意：两者括号里面的第二个值，单位都是毫秒，1s=1000ms（1秒=1000毫秒），其他时间以此类推。

如何中止计时器（清除计时器）呢？

clearInterval()

clearInterval(清除哪一个计时器)

DOCTYPE html> Document 点击开始点击停止点击开始interval 点击停止interval // 计时器 // setTimeout(要执行的方法，时间单位毫秒) let time function myClick() { // setTimeout(myFun(), 3000) time = setTimeout(function () { console.log('我也会执行') }, 2000) } // function myFun() { // return function () { // console.log('我是返回的函数') // } // } function mystop() { // clearTimeout(哪一个timeout) clearTimeout(time) } //清除setInterval计时器 let num = 0 function sum() { console.log(num++) } let myinter //声明一个变量的去装setInterval() function myinterval() { myinter = setInterval(() => { sum() }, 2000); //每隔2秒sum()函数会被执行即每隔2秒会num++，执行的尽头通常是无止境的（不关闭浏览器，除了清除计时器） } function mystopinterval() { clearInterval(myinter) }

为啥要声明一个变量去装setInterval() （下面的代码块1），而不直接（下面的代码块2）？

代码块1：

//清除setInterval计时器 let num = 0 function sum() { console.log(num++) } let myinter //声明一个变量的去装setInterval() function myinterval() { myinter = setInterval(() => { sum() }, 2000); //每隔2秒sum()函数会被执行即每隔2秒会num++，执行的尽头通常是无止境的（不关闭浏览器，除了清除计时器） } function mystopinterval() { clearInterval(myinter) }

代码块2：

//清除setInterval计时器 let num = 0 function sum() { console.log(num++) } function myinterval() { setInterval(() => { sum() }, 2000); //每隔2秒sum()函数会被执行即每隔2秒会num++，执行的尽头通常是无止境的（不关闭浏览器，除了清除计时器） } function mystopinterval() { clearInterval( setInterval(() => { sum()}, 2000);) }

函数是引用数据类型，引用数据类型在栈内存里（用于存放地址，用的时候去取），而实际函数体是在堆内存里，就是实际存放的东西。而代码块2只是清除了栈内存里的，而没有清除堆内存里的所以需要一个变量去装计时器的东西，清除时候只需在clearInterval()这个括号里写这个变量就可以清除掉了。

纸上来得终觉浅，绝知此事要躬行，自己试一试吧。

【本文地址】

公司简介

联系我们